<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
    使用设备的宽度作为试图并禁止初始的缩放
    width=device-width 宽度等于当前设备宽度
    initial-scale 初始的缩放比例（默认设置为1.0）
    maximum-scale 允许用户缩放到最大比例（默认设置为1.0）
    user-scales 用户是否可以手动缩放（默认设置为no）
    简单来说就是让手机端和电脑端的比例一样，不进行缩放
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

        @media screen and (max-width: 1520px){
            .box{
                background-color: brown;
            }
        }
        @media screen and (min-width: 768px) and (max-width:1024px) {
            .box{
                background-color: blue;
            }
        }

        @media screen and (max-width: 430px){
            .box{
                background-color: black;
            }
        }
    </style>
</head>
<body>
    <!-- 
    媒体查询会根据设备大小自动识别加载不同样式

    媒体查询语法
    @media screen and (max-width: 600px) {}
    @media screen and (max-width: 600px) and (min-width:996){}
    -->

    <div class="box"></div>
</body>
</html>